class Cart{
    constructor(){
        this.url = "http://localhost:3000/api";
        this.tbody = document.querySelector("tbody");
        this.getLocal();
        this.load();
        this.addEvent();
    }
    addEvent(){
        const that = this;
        this.tbody.addEventListener("input",function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.className === "setNum"){
                that.id = target.parentNode.parentNode.getAttribute("index");
                that.num = target.value-0;
                that.setLocal(function(i){
                    that.goods[i].num = that.num;
                });
            }
        })
        this.tbody.addEventListener("click",function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            console.log(target)
            if(target.className === "del"){
                that.id = target.parentNode.getAttribute("index");
                target.parentNode.remove();
                that.setLocal(function(i){
                    that.goods.splice(i, 1)
                });
            }
            else if(target.className === "up"){
                that.id = target.parentNode.parentNode.getAttribute("index");
                that.setLocal(function(i){
                    that.goods[i].num+=1;
                })
                that.render();
            }
            else if(target.className === "down"){
                that.id = target.parentNode.parentNode.getAttribute("index");
                that.setLocal(function(i){
                    that.goods[i].num-=1;
                    if(that.goods[i].num===0){
                        target.parentNode.parentNode.remove();
                        that.setLocal(function(i){
                            that.goods.splice(i, 1)
                        });
                    }
                })
                that.render();
            }
        })
    }
    setLocal(cb){
        let i = 0;
        this.goods.some((val,idx)=>{
            i = idx;
            return val.id === this.id;
        })
        cb(i);
        localStorage.setItem("goodsList", JSON.stringify(this.goods));
    }
    getLocal(){
        this.goods = localStorage.getItem("goodsList") ? JSON.parse(localStorage.getItem("goodsList")) : [];
    }
    load(){
        ajax({
            url:this.url,
            data:{
                type:"getGoods"
            },
            success:res=>{
                this.res = JSON.parse(res).data.msg;
                this.render();
            }
        })
    }
    render(){
        let str = "";
        this.res.forEach(val1=>{
            this.goods.forEach(val2=>{
                if(val1.GoodsID === val2.id){
                    str += `<tr index="${val2.id}">
                                <td><input type="checkbox"></td>
                                <td><img src="./images/${val1.src}.jpg" alt=""></td>
                                <td>${val1.GoodsName}</td>
                                <td><span class="up">+</span><input type="text" value="${val2.num}" class="resetNum"><span class="down">-</span></td>
                                <td>${val1.GoodsPrice}</td>
                                <td>${val2.num * val1.GoodsPrice}</td>
                                <td class="del">删除</td>
                            </tr>`
                }
            })
        })
        this.tbody.innerHTML = str;
    }
}


new Cart();